<template>
  <div id="loginfo" class="app-container calendar-list-container">
    <el-row style="margin-bottom:5px" :gutter="20">
      <el-col :span="6">
        <el-date-picker v-model="listQuery.TimeRange" :size="size" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd" />
      </el-col>
      <el-col :span="3">
        <el-select v-model="listQuery.Method" :size="size" placeholder="请选择访问方法" clearable>
          <el-option v-for="(item,key) in methodOptions" :key="key" :value="item.value" :label="item.label" />
        </el-select>
      </el-col>
      <el-col :span="6">
          <el-cascader v-model="listQuery.ControllerName" :size="size" :options="SelectOption" placeholder="请选择控制器名称" :props="SelectProp" :show-all-levels="true" style="width:100%" clearable/>
        </el-col>
      <el-col :span="6">
        <el-button :size="size" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <el-table :data="tableData" border fit highlight-current-row stripe :size="size" style="width: 100%" element-loading-text="给我一点时间" :header-cell-class-name="tableRowClassName">
        <el-table-column label="访问路径" prop="RequestPath" width="300" />
        <el-table-column label="请求方式" prop="RequestMethod" width="80" />
        <el-table-column label="入参" prop="RequestParameter" show-overflow-tooltip />
        <el-table-column label="出参" prop="ResponseResult" show-overflow-tooltip />
        <el-table-column label="操作码" prop="ResponseCode" width="80" />
        <el-table-column label="响应时间/ms" prop="Duration" width="120" />
        <el-table-column label="操作人ID" prop="UserId" />
        <el-table-column label="操作IP" prop="UserIP" width="150" />
         <el-table-column label="记录时间" prop="CreateTime" width="200" />
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" divided>
                <el-dropdown-item>
                  <el-button size="mini" type="primary" @click="handelUpdate(scope.row)">修改</el-button>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-button size="mini" type="primary" @click="handelDetail(scope.row)">详情</el-button>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-button size="mini" type="danger" @click="handelDelete(scope.row)">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="text-align: center; margin-top: 15px">
        <el-pagination :current-page="1" :page-sizes="[10, 20, 30, 50]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogState" :title="title" :modal-append-to-body="false" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row style="text-align:center">
          <el-button v-if="!dialogDisable" type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="dialogState=false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { getLogInfo, getControllerName } from '@/api/log'
export default {
  name: 'Loginfo',
  components: {},
  filters: {},
  data() {
    return {
      listQuery: {
        TimeRange: '',
        Method: '',
        ControllerName: '',
        page: 1,
        limit: 10
      },
      tableData: [],
      dialogState: false,
      dialogDisable: false,
      form: {},
      rules: {},
      total: 0,
      title: '新增',
      methodOptions: [
        { value: 'GET', label: 'GET' },
        { value: 'POST', label: 'POST' },
        { value: 'PUT', label: 'PUT' },
        { value: 'DELETE', label: 'DELETE' }
      ],
      SelectProp: {
        value: 'value',
        label: 'name',
        checkStrictly: true,
        multiple: false,
        emitPath: true
      },
      SelectOption: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['size']),
    getRoleLevel() {
      if (this.store.state.user.roleLevel === 'admin') {
        return true
      } else {
        return true
      }
    },
    headers() {
      return {
        'X-Token': getToken()
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getList()
    this.getControllerName()
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'el-button--primary is-active'
      }
      return ''
    },
    getList() {
      let temp = {
        Method: this.listQuery.Method,
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        StartTime: this.listQuery.TimeRange[0],
        EndTime: this.listQuery.TimeRange[1],
        ControllerName: this.listQuery.ControllerName !== '' ? this.listQuery.ControllerName[0] : '',
        Action: this.listQuery.ControllerName !== '' && this.listQuery.ControllerName.length > 1 ? this.listQuery.ControllerName[1] : ''
      }
      getLogInfo(temp).then((res) => {
        this.tableData = res.data.model.Items
        this.total = res.data.model.Total
      })
    },
    getControllerName() {
      getControllerName().then(res => {
        this.SelectOption = res.data.model
      })
    },
    submit() {},
    handleCreate() {
      this.dialogDisable = false
      this.dialogState = true
      this.title = '新增'
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    handelUpdate(row) {
      this.dialogState = true
      this.dialogDisable = false
      this.title = '修改'
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = Object.assign({}, row)
        this.form.CreateBy = this.$store.state.user.ID
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handelDetail(row) {
      this.title = '查看详情'
      this.dialogState = true
      this.dialogDisable = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = Object.assign({}, row)
      })
    },
    handelDelete(row) {
      this.$confirm('确定要删除吗,此操作不可恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    close() {
      this.dialogState = false
      this.dialogDisable = false
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
